<template>
  <div class="game-publish-container">
    <el-card class="publish-card">
      <template #header>
        <div class="card-header">
          <h2>发布新游戏</h2>
        </div>
        <el-steps :active="currentStep" align-center class="seteps-container">
          <el-step title="提交申请" :description="stepDesc[0]" />
          <el-step title="等待审核" :description="stepDesc[1]" />
          <el-step title="发布游戏" :description="stepDesc[2]" />
        </el-steps>
      </template>

      <div v-if="currentStep === 0">
        <Edit :type="0"></Edit>
      </div>

      <!-- <div v-else-if="currentStep === 1" class="waiting-review">
        <el-result
          icon="info"
          title="等待审核"
          sub-title="您的游戏已提交审核，请耐心等待管理员处理"
        >
          <template #extra>
            <el-button type="primary" @click="checkReviewStatus"
              >检查审核状态</el-button
            >
          </template>
        </el-result>
      </div> -->

      <!-- <div v-else class="publish-ready">
        <el-result
          icon="success"
          title="审核通过"
          sub-title="您的游戏已通过审核，现在可以正式发布"
        >
          <template #extra>
            <el-button type="primary" @click="publishGame">立即发布</el-button>
            <el-button @click="resetProcess">重新提交</el-button>
          </template>
        </el-result>
      </div> -->
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import Edit from "@/views/manage/gameM/edit.vue";

const currentStep = ref(0); // 0: 提交申请, 1: 等待审核, 2: 发布游戏

const stepDesc = ref([
  "填写游戏信息并提交审核",
  "管理员正在审核您的游戏",
  "游戏已通过审核，可以发布",
]);
</script>

<style scoped>
.game-publish-container {
  margin: 0 auto;
}

.card-header {
  text-align: center;
}

.seteps-container {
  padding: 1em 0;
}

.publish-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.waiting-review,
.publish-ready {
  text-align: center;
  padding: 20px 0;
}

:deep(.el-step__description) {
  font-size: 12px;
  color: #999;
}
</style>
